<template>
  <div class="activity-detail">
    <template v-if="activityDetail">
      <h1 class="activity-detail-title m-b-10">
        {{ activityDetail.name }}
      </h1>
      <div class="activity-meta color-gray m-b-10">
        <span class="publish-time">发布时间：{{ activityDetail.createTime }}</span>
        <span class="enterprise-names" v-if="activityDetail.enterpriseNames?.length">
          参与企业：{{ activityDetail.enterpriseNames.join('、') }}
        </span>
      </div>
      <div v-html="parseHtmlToRightHtml(activityDetail.content)" class="editor-content-view"></div>
      <div v-if="activityDetail.files?.length" class="attach">
        <span class="color-gray">相关文件：</span>
        <div class="attach-list">
          <div
            class="c-p attach-item"
            v-for="file in activityDetail.files"
            :key="file.url"
            @click="download(file.url)"
          >
            <span class="file-name">{{ file.name }}</span>
            <span class="file-size" v-if="file.size">（{{ formatFileSize(file.size) }}）</span>
          </div>
        </div>
      </div>
      <div class="activity-footer" v-if="activityDetail.updateBy">
        <p class="color-gray">
          {{ activityDetail.updateBy }}最后更新于{{ activityDetail.updateTime }}
        </p>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useDownload } from '@/hooks/useDownload';
import { getEnterpriseActivity } from '@/api/enterpeise';
import { ElLoading } from 'element-plus';
import { parseHtmlToRightHtml } from '@/utils/parse';
const { download } = useDownload();
const route = useRoute();

// 活动详情数据
const activityDetail = ref<ActivityDetail>({
  name: '',
  createTime: '',
  content: '',
});

// 格式化文件大小
const formatFileSize = (size: number) => {
  if (size < 1024) return size + 'B';
  if (size < 1024 * 1024) return (size / 1024).toFixed(2) + 'KB';
  return (size / (1024 * 1024)).toFixed(2) + 'MB';
};

// 定义接口
interface ActivityDetail {
  name: string;
  createTime: string;
  enterpriseNames?: string[];
  content: string;
  files?: Array<{
    url: string;
    name: string;
    size?: number;
  }>;
  updateBy?: string;
  updateTime?: string;
}

// 加载数据
const loadData = async (id: string | number) => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载...',
    background: 'rgba(255, 255, 255, 0.7)',
  });

  try {
    const res = await getEnterpriseActivity(id);
    //@ts-ignore
    if (res.code === 200) {
      activityDetail.value = res.data;
    }
  } catch (error) {
    console.error('加载详情失败:', error);
  } finally {
    loading.close();
  }
};

onMounted(() => {
  const id = route.query.id as string | number;
  if (id) {
    loadData(id);
  }
});
</script>
<style lang="scss" scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.activity-detail {
  min-height: 100vh;
  padding: 20px 100px;
  background-color: #fff;

  &-title {
    line-height: 1.45;
    font-family: '思源宋体-Bold';
    font-size: 2rem;
    text-align: center;
    color: #003b7a;
  }

  .activity-meta {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
  }

  .content {
    margin: 30px 0;
    line-height: 1.6;
  }

  .attach {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;

    &-list {
      margin-top: 10px;
    }

    &-item {
      padding: 8px 0;
      color: #1890ff;
      transition: color 0.3s;

      &:hover {
        color: #40a9ff;
      }

      .file-size {
        color: #999;
        margin-left: 5px;
      }
    }
  }

  .activity-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    text-align: right;
    font-size: 12px;
  }
}
</style>
